// 轮播图定时制作
// 1. 初始数据
const sliderData = [
  { url: './upload/big.png', },
  { url: './upload/10.jpg' },
  { url: './upload/11.jpg' },
  { url: './upload/big.png', },
  { url: './upload/10.jpg' },
  { url: './upload/11.jpg' },
  { url: './upload/big.png', },
  { url: './upload/10.jpg' },
  { url: './upload/11.jpg' },
 

]
const img = document.querySelector('.bigimg')
let i = 0
// 点击右箭头，图片切换
document.querySelector('.right-arrow').addEventListener('click', () => {
  // 用自定义属性
  i++
  if (i >= sliderData.length) {
    i = 0
  }
  img.src = sliderData[i].url
  document.querySelector('.xiaored').classList.remove('xiaored')
  document.querySelector(`.yuan ul a:nth-child(${i + 1}) li`).classList.add('xiaored')
})
// 点击左箭头，图片切换
document.querySelector('.left-arrow').addEventListener('click', () => {
  // 用自定义属性
  i--
  if (i < 0) {
    i = sliderData.length - 1
  }
  img.src = sliderData[i].url
  document.querySelector('.xiaored').classList.remove('xiaored')
  document.querySelector(`.yuan ul a:nth-child(${i + 1}) li`).classList.add('xiaored')
})

// 定义定时器
let timer = setInterval(function () {
  i++
  // if (i <= 0) {
  //   i = sliderData.length - 1
  // }
  if (i >= sliderData.length) {
    i = 0
  }
  img.src = sliderData[i].url
  document.querySelector('.xiaored').classList.remove('xiaored')
  document.querySelector(`.yuan ul a:nth-child(${i + 1}) li`).classList.add('xiaored')
 
}, 2000)

// 当鼠标经过图片或者箭头时，定时器停止
document.querySelector('.bd-images').addEventListener('mouseover', function () {
  clearInterval(timer)
})
// 当鼠标离开时。定时器再次开启
// let timer=''

document.querySelector('.bd-images').addEventListener('mouseout', function () {
  const img = document.querySelector('.bigimg')
  timer = setInterval(function () {
    i++
    if (i >= sliderData.length - 1) {
      i = 0
    }
    // 数组持续向右移动不需要写小于0的判断
   
    img.src = sliderData[i].url
    document.querySelector('.xiaored').classList.remove('xiaored')
    document.querySelector(`.yuan ul a:nth-child(${i + 1}) li`).classList.add('xiaored')
    
  }, 2000)
})



// 音频播放效果
const ww = document.querySelector('.ww')
document.querySelector('.bgcbox').addEventListener('click', function () {
  console.log(1);
  if(ww.paused){
    ww.play()
  }
    else{
        ww.pause()
      }
    })
    ww.addEventListener('ended',function(){
      ww.curentTime=0;
      ww.play()
    })


// 用户登录模块
document.querySelector('.yhdl').addEventListener('click', function () {
  // console.log(1);

  if (document.querySelector('.yd').style.display === 'none') {
    document.querySelector('.yd').style.display = 'block'
   document.querySelector('.other').style.opacity=0.7
  }
  else {
    document.querySelector('.yd').style.display = 'none'
    document.querySelector('.other').style.opacity = 1

  }
})
document.querySelector('.gb').addEventListener('click', function () {

  document.querySelector('.yd').style.display = 'none'
  document.querySelector('.other').style.opacity = 1

})
const sjhm=''
const yzm=''
document.querySelector('.zhgl').addEventListener('click',()=>{
 const sj= document.querySelector('.sj input')
  const yz = document.querySelector('.yz input')
  if (/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(sj.value)){
       if(/^\d{4}$/.test(yz.value)){
         alert('登录成功')
        localStorage.setItem(sjhm,sj.value)
         localStorage.setItem(yzm, yz.value)
        
       }
       else{
      alert('验证码格式错误')
  }
}
  else {
    alert('手机号输入错误')
  }
})
const code = document.querySelector('.yz .yzm')
let flag = true
// 节流法
// 点击事件
code.addEventListener('click', function () {
  if (flag) {
    // 开定时器
    flag = false
    let i = 5
    code.innerHTML = `05秒重新获取`
    let timerid = setInterval(function () {
      i--
      //  限制i取值范围
      //  不可以用this，this指向被调用函数
      code.innerHTML = `0${i}秒重新获取`
      if (i === 0) {
        // 关闭定时器
        clearInterval(timerid)
        code.innerHTML = '重新获取'
        flag = true

      }
    }, 1000)
  }
})





